<template>
  <el-card shadow="never" class="portal-todoList-box box card_user">
    <div class="card_div">
      <div class="card_user_heard">
        {{ userName }}
      </div>
      <div class="card_user_info">
        <p style="font-size: 16px; font-weight: 600">
          {{ this.$store.getters.userInfo.userName }}，{{ timeState }}
        </p>
        <p style="font-size: 12px; color: #666; margin-top: 10px">
          {{ departmentName }}
        </p>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      userName: "",
      timeState: "",
      departmentName: "",
    };
  },
  computed: {},
  created() {
    if (this.$store.getters.userInfo.userName.length == 3) {
      this.userName = this.$store.getters.userInfo.userName.substring(1, 3);
    } else if (this.$store.getters.userInfo.userName.length == 2) {
      this.userName = this.$store.getters.userInfo.userName.substring(1, 2);
    } else if (this.$store.getters.userInfo.userName.length == 4) {
      this.userName = this.$store.getters.userInfo.userName.substring(2, 4);
    }
    this.timeState = this.getTimeState();
    this.departmentName = this.getDepartmentName();
  },
  methods: {
    getTimeState() {
      let date = new Date();
      let hours = date.getHours();
      let state = "";
      if (hours >= 0 && hours <= 10) {
        state = "早上好！";
      } else if (hours > 10 && hours <= 14) {
        state = "中午好！";
      } else if (hours > 14 && hours <= 18) {
        state = "下午好！";
      } else if (hours > 18 && hours <= 24) {
        state = "晚上好！";
      }
      return state;
    },
    getDepartmentName() {
      let departmentArr =
        this.$store.getters.userInfo.departmentName.split("/");
      console.log(departmentArr, "++++++");
      let departmentName =
        departmentArr[0] +
        (departmentArr[2] ? "/" + departmentArr[2] : "") +
        (departmentArr[4] ? "/" + departmentArr[4] : "");
      return departmentName;
    },
  },
};
</script>

<style lang="scss" scoped>
.card_user {
  >>> .el-card__body {
    height: 100%;
  }
}

.card_div {
  padding: 20px;
  position: relative;
  height: 100%;
  .card_user_heard {
    display: inline-block;
    font-size: 16px;
    color: #fff;
    width: 62px;
    height: 62px;
    font-weight: 600;
    padding: 15px;
    background-color: #1890ff;
    border-radius: 100px;
    position: absolute;
    top: calc(50% - 31px);
    text-align: center;
    line-height: 32px;
    // left: 30px;
  }
  .card_user_info {
    display: inline-block;
    margin-top: 10px;
    position: absolute;
    top: calc(50% - 31px);
    left: 100px;
    width: calc(100% - 120px);
    p {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
    }
  }
}
</style>